<!DOCTYPE html>
<html>
  <head>
    <title>可以变换主题颜色的首页demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="./resources/html5shiv.min.js"></script>
        <script src="./resources/respond.min.js"></script>
    <![endif]-->
    <style>
        .declaration-backgroundColor {
            background-color : #0078d8
        }
        .declaration-backgroundColor-1 {
            background-color : #8a8cb2
        }
        .btn-success-1 {
          color: #fff;
          background-color: #8cd6b5;
          border-color: #8cd6b5;
        }
        .declaration-backgroundColor-2 {
            background-color : #0092c7
        }
        .btn-success-2 {
          color: #fff;
          background-color: #5cb85c;
          border-color: #4cae4c;
        }
        .declaration-backgroundColor-3 {
            background-color : #f4efcc
        }
        .btn-success-2 {
          color: #fff;
          background-color: #5cb85c;
          border-color: #4cae4c;
        }
        .declaration-backgroundColor-4 {
            background-color : #da0c30
        }
        .declaration-backgroundColor-5 {
            background-color : #005e37
        }
        .declaration-backgroundColor-6 {
            background-color : #a23169;
        }
        .declaration-backgroundColor-7 {
            background-color : #f2cc03;
        }
        
        .declaration-frontColor {
            color : #ffffff
        }
        .tab-font {
            font-size : 16px;
            font-family: "幼圆", Courier, monospace ;
            color : #ffffff;
        }
        .tab-selected {
            left : 5px 
        }
        .tab-btn {
            cursor : pointer
        }
        h1, h2, h3, h4, h5, h6 {
            margin-top : 0px;
            margin-bottom : 0px;
            font-family : "Microsoft YaHei","WenQuanYi Micro Hei",SimHei,tahoma,sans-serif;
            line-height : 1.5;
        }
        .nominated-title{
            background : none repeat scroll 0 center rgba(0,0,0,0);
            border-bottom : 1px solid #e9e9e9;
            height : 36px;
            margin : 0px 0px 10px;
            line-height : 1.8em;
            overflow : hidden;
        }
        .nominated h1{
            color : #4c4c4c;
            font-size : 18px;
            float : left;
            font-weight : normal;
        }
        .media-body h4 {
            color : #4c4c4c; 
        }
        .ask-title {
            border-bottom : 1px solid #c5ebf9;
            margin-top : 20px;
            margin-bottom : 20px;
            height : 36px;
            line-height : 1.8em
        }
        .ask-title h4 {
            color : #0078b6
        }
        .content {
            color : #999;
            line-height : 26px;
        }
        .content h4{
            color : #333;
            font-size : 16px;
            height : 49px;
            line-height : 57px;
            margin-left:25px;
        }
        .content-headlines {
            height : 100px;
            font-size : 14px;
            color : #999;
            overflow : hidden;
            word-wrap:break-word;
            line-height : 26px;
            list-style-type : none;
            margin-left : -15px;
        }
        .content-headlines img {
            width : 135px;
            height : 90px;
        }
        .content-headlines h5 {
            color : #666;
            font-weight : bold;
            font-size : 1em;
            line-height : 1.5;
            list-style : none;
            list-style-type : none;
        }
        .content-headlines p {
            line-height : 1.67;
            font-size : 12px;
        }
        .content li {
            list-style-type: square;
        }
        .content li a {
            cursor : pointer;
            color : #999;
        }
        
    </style>
  </head>
  <body>
    <div class="declaration-backgroundColor" style="width:100%"> <!-- 上部通条背景 -->
      <!-- Jumbotron -->
      <div class="jumbotron container declaration-backgroundColor" style='height:400px'> <!-- 布局容器 -->
      <!-- container-fluid 与 container类似，用于 100% 宽度 -->
        <div class='row'>
            <div class='span9 col-lg-9 col-md-8 col-sm-8 declaration-frontColor'>
                <!-- Carousel    ================================================== -->
                    <div id="myCarousel" class="carousel slide" data-ride="carousel">
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                      </ol>
                      <div class="carousel-inner">
                        <div class="item active">
                          <img data-src="holder.js/0x300/auto/#0078d8:#0078d8" alt="First slide">
                          <!-- <img src="img/carouselbackground.jpg" alt="First slide"> -->
                          <div class="container">
                            <div class="carousel-caption">
                              <h1>第一个展示页</h1>
                              <p>缩点嘛好馁 缩点嘛好馁 缩点嘛好馁 缩点嘛好馁</p>
                              <p>缩点嘛好馁 缩点嘛好馁</p>
                              <!-- <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> -->
                            </div>
                          </div>
                        </div>
                        <div class="item">
                          <img data-src="holder.js/0x300/auto/#0078d8:#0078d8" alt="Second slide">
                          <!-- <img src="img/carouselbackground.jpg" alt="Second slide"> -->
                          <div class="container">
                            <div class="carousel-caption">
                              <h1>第二个展示页</h1>
                              <p>这是第二个展示页的副标题</p>
                              <!-- <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> -->
                            </div>
                          </div>
                        </div>
                        <div class="item">
                          <img data-src="holder.js/0x300/auto/#0078d8:#0078d8" alt="Third slide">
                          <!-- <img src="img/carouselbackground.jpg" alt="Third slide"> -->
                          <div class="container">
                            <div class="carousel-caption">
                              <h1>第三个 展示页</h1>
                              <p>this is the third</p>
                              <!-- <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> -->
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 
                      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                      -->
                    </div>
                <!-- /.carousel -->
            </div>
            <div class="clearfix visible-xs"></div>
            <div class='span3 col-lg-3 col-md-4 col-sm-4 declaration-backgroundColor'> <!-- 登录和注册区域 -->
              
<!--
                <ul class="nav nav-tabs nav-justified " id='myTab' style='padding-bottom:10px'> 
                  <li class="active"><a href="#register" class="declaration-frontColor">注册</a></li>
                  <li><a href="#login" class="declaration-frontColor">登录 <span class="glyphicon glyphicon-circle-arrow-right"></span></a></li>
                </ul>
-->
                <!-- 注册和登录的切换链接 -->
                <div class="row" id="myTab">
                    <div class="span4 col-lg-6 col-md-6 col-sm-6 col-xs-6 declaration-frontColor">
                        <label class="tab-font" id="title">注册账号</label>
                    </div>
                    <div class="span1 offset7 col-lg-6 col-md-6 col-sm-6 col-xs-6 tab-btn" id="link_login" style="display:block;">
                        <div href="#login" class="tab-font" id="btn_login" >登录 <span class="glyphicon glyphicon-circle-arrow-right"></span></div>
                    </div>
                    <div class="span1 offset7 col-lg-6 col-md-6 col-sm-6 col-xs-6 tab-btn" id="link_register" style="display:none;">
                        <div href="#register" class="tab-font" id="btn_register">注册 <span class="glyphicon glyphicon-circle-arrow-right"></span></div>
                    </div>
                </div>
                <div class='tab-content'>                    
                    <div class='tab-pane active' id='register'>                    <!-- 注册 -->
                        <form role="form" class='form container' id='regform'>
                            <div class='form-group row'>
                                    <div class='span6 col-lg-6 col-md-6 col-sm-6 col-xs-6' style='padding-left:0px'>
                                        <label class="sr-only" for="surname">姓</label>
                                        <input type="text" class="form-control" id='surname' placeholder="姓" required autofocus>
                                    </div>
                                    <div class='span6 col-lg-6 col-md-6 col-sm-6 col-xs-6' style='padding-right:0px'>
                                        <label class="sr-only" for="name">名</label>
                                        <input type="text" class="form-control" id='name' placeholder="名" required >
                                    </div>
                            </div>                                
                            <div class='form-group row'>
                                <input type="text" class="form-control" placeholder="邮箱" required >
                            </div>
                            <div class='form-group row'>
                                <input type="password" class="form-control" placeholder="密码" required>
                            </div>
                            <div class='form-group row'>
                                <button class="btn btn-lg btn-success btn-block" type="submit">注册账号</button>
                            </div>
                        </form>
                    </div>
                    <div class='tab-pane' id='login'> <!-- 登录 -->
                        <form role='form' class='form container' id='loginform'>                             
                            <div class='form-group row'>
                                <input type="text" class="form-control" placeholder="邮箱" required >
                            </div>
                            <div class='form-group row'>
                                <input type="password" class="form-control" placeholder="密码" required>
                            </div>
                            <div class='form-group row'>
                                <button class="btn btn-lg btn-success btn-block" type="submit">登录</button>
                            </div>
                            <div class='form-group row-fluid'>
                                <div class="checkbox col-md-6 pull-left" style="margin:0px">
                                    <label>
                                        <input type="checkbox"> <span class="declaration-frontColor">记住我</span>
                                    </label>
                                </div>
                                <div class='col-md-6 pull-right' style="left:35px">
                                        <a class='declaration-frontColor'>忘记密码？</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
        
      </div> <!-- 布局容器 结束 -->
    </div> <!-- 上部通条背景结束 -->
    <!-- 下部主体部分 -->
    <div class="container"> 
        <div class="row"> 
            <div class="col-md-9"> <!-- 左侧主要内容 -->
                <!-- 以下是 最新推荐 -->
                <div class="nominated-title nominated">
                    <h1>最新推荐</h1>
                </div>
                <div>                
                    <div class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" data-src="holder.js/330x235"  height=235 width=330 src="img/aaa.jpg" alt="儿童医院+一中心+总医院">
                        </a>
                        <div class="media-body">
                            <ul class="list-unstyled">
                                <li class="media-heading">
                                    <h4>
                                        儿童医院与一中心、总医院（上）
                                        <small class="pull-right">2014-12-02</small>
                                    </h4>
                                </li>
                                <li class="media-heading">
                                    <h4>
                                        儿童医院与一中心、总医院（中）
                                        <small class="pull-right">2014-12-02</small>
                                    </h4>
                                </li>
                                <li class="media-heading">
                                    <h4>
                                        儿童医院与一中心、总医院（下）
                                        <small class="pull-right">2014-12-02</small>
                                    </h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 以上是 最新推荐 -->
                <!-- 热门问答 -->
                <div class="ask-title">
                    <h4>热门问答</h4>
                </div>
                <div class="row-fluid" style="margin-left:-40px;margin-right:-15px;">
                    <div class="col-md-6 content">
                        <h4>时政·消息</h4>
                        <ul>
                            <li>
                                <div class="media content-headlines">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" data-src="holder.js/130x130" src="img/aaa.jpg" alt="儿童医院+一中心+总医院">
                                    </a>
                                    <div class="">
                                        <h5 class="">儿童医院与一中心和总医院到底是什么关系呢？</h5>
                                        <p>内容文字，内容文字，内容文字，内容文字，内容文字。<a></a></p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a>儿童医院与一中心的关系</a>
                            </li>
                            <li>
                                <a>儿童医院与总医院的关系</a>
                            </li>
                            <li>
                                <a>一中心与总医院的关系</a>
                            </li>
                            <li>
                                <a>儿童医院与二附属的关系</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6 content">
                        <h4>时政·消息</h4>
                        <ul>
                            <li>
                                <div class="media content-headlines">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" data-src="holder.js/130x130" src="img/aaa.jpg" alt="儿童医院+一中心+总医院">
                                    </a>
                                    <div class="">
                                        <h5 class="">儿童医院与一中心和总医院到底是什么关系呢？</h5>
                                        <p>内容文字，内容文字，内容文字，内容文字，内容文字。<a></a></p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a>儿童医院与一中心的关系</a>
                            </li>
                            <li>
                                <a>儿童医院与总医院的关系</a>
                            </li>
                            <li>
                                <a>一中心与总医院的关系</a>
                            </li>
                            <li>
                                <a>儿童医院与二附属的关系</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row-fluid" style="margin-left:-40px;margin-right:-15px;">
                    <div class="col-md-6 content">
                        <h4>时政·消息</h4>
                        <ul>
                            <li>
                                <div class="media content-headlines">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" data-src="holder.js/130x130" src="img/aaa.jpg" alt="儿童医院+一中心+总医院">
                                    </a>
                                    <div class="">
                                        <h5 class="">儿童医院与一中心和总医院到底是什么关系呢？</h5>
                                        <p>内容文字，内容文字，内容文字，内容文字，内容文字。<a></a></p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a>儿童医院与一中心的关系</a>
                            </li>
                            <li>
                                <a>儿童医院与总医院的关系</a>
                            </li>
                            <li>
                                <a>一中心与总医院的关系</a>
                            </li>
                            <li>
                                <a>儿童医院与二附属的关系</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6 content">
                        <h4>时政·消息</h4>
                        <ul>
                            <li>
                                <div class="media content-headlines">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" data-src="holder.js/130x130" src="img/aaa.jpg" alt="儿童医院+一中心+总医院">
                                    </a>
                                    <div class="">
                                        <h5 class="">儿童医院与一中心和总医院到底是什么关系呢？</h5>
                                        <p>内容文字，内容文字，内容文字，内容文字，内容文字。<a></a></p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a>儿童医院与一中心的关系</a>
                            </li>
                            <li>
                                <a>儿童医院与总医院的关系</a>
                            </li>
                            <li>
                                <a>一中心与总医院的关系</a>
                            </li>
                            <li>
                                <a>儿童医院与二附属的关系</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="row-fluid" style="margin-left:-40px;margin-right:-15px;">
                    <div class="col-md-6 content">
                        <h4>时政·消息</h4>
                        <ul>
                            <li>
                                <div class="media content-headlines">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" data-src="holder.js/130x130" src="img/aaa.jpg" alt="儿童医院+一中心+总医院">
                                    </a>
                                    <div class="">
                                        <h5 class="">儿童医院与一中心和总医院到底是什么关系呢？</h5>
                                        <p>内容文字，内容文字，内容文字，内容文字，内容文字。<a></a></p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a>儿童医院与一中心的关系</a>
                            </li>
                            <li>
                                <a>儿童医院与总医院的关系</a>
                            </li>
                            <li>
                                <a>一中心与总医院的关系</a>
                            </li>
                            <li>
                                <a>儿童医院与二附属的关系</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6 content">
                        <h4>时政·消息</h4>
                        <ul>
                            <li>
                                <div class="media content-headlines">
                                    <a class="pull-left" href="#">
                                        <img class="media-object" data-src="holder.js/130x130" src="img/aaa.jpg" alt="儿童医院+一中心+总医院">
                                    </a>
                                    <div class="">
                                        <h5 class="">儿童医院与一中心和总医院到底是什么关系呢？</h5>
                                        <p>内容文字，内容文字，内容文字，内容文字，内容文字。<a></a></p>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <a>儿童医院与一中心的关系</a>
                            </li>
                            <li>
                                <a>儿童医院与总医院的关系</a>
                            </li>
                            <li>
                                <a>一中心与总医院的关系</a>
                            </li>
                            <li>
                                <a>儿童医院与二附属的关系</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-3 panel panel-default"> <!-- 右侧标签云 -->
                <div class="panel-body">
                    <h1 style="display: inline-block;">第一个</h1>
                    <h2 style="display: inline-block;">标签</h2>
                    <h4 style="display: inline-block;">第签</h4>
                    <h6 style="display: inline-block;">第四签</h6>
                    <h1 style="display: inline-block;">第五个标签</h1>
                    <h3 style="display: inline-block;">第个标签</h3>
                    <h5 style="display: inline-block;">第签</h5>
                    <h1 style="display: inline-block;">ABC</h1>
                    <h6 style="display: inline-block;">第a标签</h6>
                    <h3 style="display: inline-block;">标签</h3>
                    <h6 style="display: inline-block;">Acc标签</h6>
                </div>
            </div>
        </div>
        <div class="panel panel-default text-center">
            <p>
                <ul class="list-inline">
                  <li><a>关于我们</a></li>
                  <li><a>加入我们</a></li>
                  <li><a>免责声明</a></li>
                  <li><a>联系我们</a></li>
                </ul>
            </p>
            <p class="text-muted">
                ©2014早来的天使网 京ICP备00000000号-2 京公网安备0000000000
            </p>
        </div>
    </div>
  </body>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="./resources/jquery.min.js"></script>
    <!-- holder.js 用于直接在客户端渲染图片的占位 -->
    <script src="./resources/holder/holder.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script>
    /**
     * 为myTab控件的a标签绑上事件
     */
    $('#btn_login').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
        $('#link_login').hide();
        $('#link_register').show();
        $('#title').text('登录网站');
    });
    $('#btn_register').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
        $('#link_register').hide();
        $('#link_login').show();
        $('#title').text('注册账号');
    });
    // 初始化 carousel 轮播
    $('#myCarousel').carousel({
      interval: 2000, // 间隔时间2000毫秒
      pause:'hover' // 在鼠标移入时暂停
    });
    // carousel 轮播 从左到右循环
    $('#myCarousel').carousel('cycle');
    $('.tab-btn').mouseover(function(){
        $(this).addClass('tab-selected');
    });
    $('.tab-btn').mouseout(function(){
        $(this).removeClass('tab-selected');
    });
    var mainColor = '0';
    $('.media-object').click(function (e) {
      $('.declaration-backgroundColor').removeClass('declaration-backgroundColor'+'-'+mainColor);
      $('.declaration-backgroundColor').addClass('declaration-backgroundColor'+(mainColor == '7'?'':'-'+(++mainColor)));
      if(mainColor == '7'){
        mainColor = '0';
      }
    });
    /*
    
        .declaration-backgroundColor-1 {
            background-color : #8a8cb2
        }
        .declaration-backgroundColor-2 {
            background-color : #0092c7
        }
        .declaration-backgroundColor-3 {
            background-color : #f4efcc
        }
    */
    </script>
</html>